<!--
This Source Code Form is subject to the terms of the Mozilla Public
License, v. 2.0. If a copy of the MPL was not distributed with this
file, You can obtain one at http://mozilla.org/MPL/2.0/.
Copyright (c) 2023-present Kaleidos INC
-->

<ng-container *transloco="let t; read: 'project_settings'">
  <tui-hosted-dropdown
    [tuiDropdownAlign]="'right'"
    [content]="confirmRevokeDialog"
    [(open)]="dropdownState">
    <button
      #cancel
      aria-haspopup="true"
      [attr.aria-expanded]="dropdownState"
      data-test="revoke-invitation"
      class="revoke-invitation-btn row-action"
      tuiLink
      appearance="tertiary">
      {{ t('members.cancel_invitation') }}
    </button>
  </tui-hosted-dropdown>

  <ng-template #confirmRevokeDialog>
    <div
      class="action-dialog"
      cdkTrapFocus>
      <p class="action-dialog-title">
        {{
          t('members.revoke.question', {
            user: invitation.user?.username ?? invitation.email
          })
        }}
      </p>
      <p class="action-dialog-description">
        {{ t('members.revoke.description') }}
      </p>
      <div class="action-dialog-actions">
        <button
          tuiLink
          appearance="tertiary"
          (click)="keep()">
          {{ t('members.revoke.keep_invitation') }}
        </button>
        <button
          data-test="confirm-cancel"
          tuiButton
          appearance="secondary"
          (click)="confirm()">
          {{ t('members.revoke.confirm_cancel_invitation') }}
        </button>
      </div>
    </div>
  </ng-template>
</ng-container>
